<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap  Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    
    
  </head>
  <body>
	<div class="page-header">
		<h1>Bootstrap Example page <small></small>
		
		<div class="pull-right">
		<p>
			<button type="button" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-envelope"></button>
			<button type="button" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-tasks"> Info <span class="badge">1</span></button>
			<button type="button" class="btn btn-default navbar-btn">
			<span class="glyphicon glyphicon-user"></span> Sign in
			</button>
			</p>
		</div>
		
		</h1>
		
		
		
	</div>

	<nav class="navbar navbar-default navbar-static-top" role="navigation">
		<div id="bs-example-navbar-collapse-8" class="collapse navbar-collapse">
		  <ul class="nav navbar-nav">
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
			</ul>
		</div>
	</nav>
	<div class="row">
		
		<div class="col-md-2">
			<div data-spy="affix" data-offset-top="200" role="complementary" class="bs-sidebar hidden-print affix-top">
				<ul class="nav bs-sidenav navbar-right">
					<li> <a href="#menu1">Table Example</a> </li>
					<li class="active"><a href="#menu2">Page Example</a></li>
					<li> 
						<ul class="nav">
							<li><a href="#menu3">Dialog Example</a></li>
							<li>
								<ul class="nav">
									<li class=""><a href="#menu4">Form Example</a></li>
									<li class=""><a href="#menu5">Tooltip Example</a></li>
								  </ul>
							</li>
						</ul>
					</li>
				 </ul>
			  </div>
			  <div>
				 

			  </div>
		</div>
		<div class="col-md-9" >
			<ol class="breadcrumb">
			  <li><a href="#">Home</a></li>
			  <li class="active"><a href="#">Table</a></li>
			</ol>
			<div class="panel panel-default">
				<div class="panel-heading">
					<div id="top-ops" >
						 <form class="form-inline" role="form">
							  <div class="form-group">
								<label class="sr-only" for="search">Email address</label>
								<input type="search" class="form-control" id="searchInput" placeholder="Search">
							  </div>
							<button type="button" class="btn btn-info  btn-sm">
								<span class="glyphicon glyphicon-search"></span> search
							</button>
							<button type="button" class="btn btn-warning  btn-sm">
							<span class="glyphicon glyphicon-minus"></span>
							clear</button>	
							<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal">
							<span class="glyphicon glyphicon-plus"></span>
							add</button>
						</form>
					</div>
				<div>
					
				</div>
			</div>
			<div id="table_page">
				<table id="dataView" class="table table-hover">
				  <thead>
					<tr>
					  <th>#</th>
					  <th>First Name</th>
					  <th>Last Name</th>
					  <th>Username</th>
					  <th>Pic</th>
					  <th>Status</th>
					</tr>
				  </thead>
				  <tbody>
					<tr>
					  <td>1</td>
					  <td>Mark</td>
					  <td>Otto</td>
					  <td>@mdo</td>
					  <td>file:</td>
					  <td><span class="glyphicon glyphicon-ok"></span></td>
					</tr>
					<tr>
					  <td>2</td>
					  <td>Jacob</td>
					  <td>Thornton</td>
					  <td>@fat</td>
					  <td>file:</td>
					  <td><span class="glyphicon glyphicon-ok"></span></td>
					</tr>
					<tr>
					  <td>3</td>
					  <td>Larry</td>
					  <td>the Bird</td>
					  <td>@twitter</td>
					  <td>file:</td>
					  <td><span class="glyphicon glyphicon-remove"></span></td>
					</tr>
				</tbody>
				</table>
			</div>
			<div class="panel-body">
				<div class="row">
					<div class="col-md-4 col-md-offset-4">
					<ul class="pagination pagination-md">
					  <li><a href="#">&laquo;</a></li>
					  <li><a href="#">1</a></li>
					  <li><a href="#">2</a></li>
					  <li><a href="#">3</a></li>
					  <li><a href="#">4</a></li>
					  <li><a href="#">5</a></li>
					  <li><a href="#">&raquo;</a></li>
					</ul>
					</div>
				 </div>
			</div>
			</div>
		</div>
	</div>
	<!-- -->
	
	
	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
	      </div>
	      <div class="modal-body">
	         <form role="form">
				<div class="form-group">
				     <div class="row">
						<div class="col-md-6">
							<label for="fName">First Name</label>
							<input   class="form-control" id="fName" placeholder="First Name">
						</div>
						<div class="col-md-6">
							<label for="lName">Last Name</label>
							<input   class="form-control" id="lName" placeholder="Last Name">
						</div>
					</div>
				</div>
				  <div class="form-group">
					<label for="uName">User Name</label>
					<input   class="form-control" id="uName" placeholder="User Name">
				  </div>
				  <div class="form-group">
					<label for="iFile">File input</label>
					<input type="file" id="iFile">
					<p class="help-block">Example block-level help text here.</p>
				  </div>
				  <div class="checkbox">
					<label>
					  <input type="checkbox"> Status
					</label>
				  </div>
				  <button id="newDataBtn" type="submit" class="btn btn-default">Submit</button>
			</form>

	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="button" class="btn btn-primary">Save changes</button>
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
      
    <script src="js/jquery-2.0.3.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
    	$(document).ready(function(){
			
			$('#myAffix').affix({
			    offset: {
			      top: 100
			    , bottom: function () {
			        return (this.bottom = $('.bs-footer').outerHeight(true))
			      }
			    }
			  });
			  
			$('#newDataBtn').click(function(){
				 $('#dataView > tbody').prepend("<tr><td>4</td><td>aaa</td><td>aaa</td><td>aaa</td></tr>")
				
			});
    	});
    </script>
  </body>
</html>

